<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024/5/20
  Time: 20:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生添加页面</title>
    <style>
        .gj-datepicker-md [role="right-icon"]{
            top: 8px !important;
        }
    </style>
</head>
<body>
   <div class="container">
       <!--顶部-->
       <jsp:include page="../../top.jsp"/>

       <!--主体界面-->
       <div class="row">
           <!--sm-4表示小屏幕上占据1/4-->
           <section class="col-sm-4 offset-sm-4">
               <!--
               对表单数据进行校验：
                  1.form表单添加novalidate
                  2.form表单项写上校验规则及其对应的提示信息
                  3.提交表单时，进行校验、加上相应的css类
               -->
               <form id="addForm" novalidate>
                   <!--表单项：form-group：用于创建一组表单，用于整体的美化-->
                   <!--设置autocomplete属性可以进行提示-->
                   <div class="form-group">
                       <!--设置for：用于点击选中,识别的是id-->
                       <label for="no">学号</label>
                       <input type="text" class="form-control" name="no" id="no" required/>
                       <div class="invalid-feedback">学号不能为空</div>
                   </div>

                   <div class="form-group">
                       <!--设置for：用于点击选中-->
                       <label for="realName">姓名</label>
                       <input type="text" class="form-control" name="realName" id="realName" required/>
                       <div class="invalid-feedback">姓名不能为空</div>
                   </div>

                   <div class="form-group">
                       <!--设置for：用于点击选中-->
                       <label for="birthDay">生日</label>
                       <input type="text" readonly class="form-control" name="birthDay" id="birthDay" required/>
                       <div class="invalid-feedback">生日不能为空</div>
                   </div>

                   <div class="form-group">
                       <!--设置for：用于点击选中-->
                       <label for="phone">手机</label>
                       <input type="text" class="form-control" name="phone" id="phone" required/>
                       <div class="invalid-feedback">手机不能为空</div>
                   </div>

                   <div class="form-group">
                       <!--设置for：用于点击选中-->
                       <label for="email">邮箱</label>
                       <input type="email" class="form-control" name="email" id="email" required/>
                       <div class="invalid-feedback">请输入合法的邮箱</div>
                   </div>

                   <!--两个按钮-->
                   <div class="d-flex justify-content-around">
                       <input type="button" class="btn btn-primary" id="add" onclick="addStudent()" value="新增">
                       <!--点击返回到上一个页面，或者使用history.go(-1)-->
                       <!--# 符号被用作超链接的目标，它通常代表当前页面的顶部或者是一个占位符链接。
                       # 表示超链接将定位到当前页面的顶部。
                       如果 href 属性的值是 #，点击超链接后页面会滚动到顶部，或者执行与该占位符链接相关的 JavaScript 操作。-->
                       <a class="btn btn-primary" id="back" href="#" onclick="history.back()">返回</a>
                   </div>
               </form>
           </section>
       </div>

       <!--底部-->
       <jsp:include page="../../bottom.jsp"/>
   </div>

   <!--引入日期框js代码-->
   <script src="<%=request.getContextPath()%>/resources/js/addStudent.js"></script>
   <script src="<%=request.getContextPath()%>/resources/js/common.js"></script>

   <script>
       function addStudent() {
           //点击新增进行校验
           // 返回值是一个boolean类型，是js原生的校验方法
           //1.校验
           var validateResult = document.getElementById("addForm").checkValidity();
           //2.添加一个css，并提交校验
           $("#addForm").addClass("was-validated")
           if(!validateResult){
               return;
           }


           $.ajax({
               type:"post",
               url:'<%=request.getContextPath()%>/admin/addStudent',
               data:formDataObj("#addForm"),
               success:function (result) {
                   if(result.toString()=="Add StudentInfo Success!"){
                       //成功的回调函数
                       $("#tipCont").text("Add StudentInfo Success!")
                       // 展示
                       $("#tioModal").modal("show")
                       //延时2s跳转
                       setTimeout(()=>{location.href="<%=request.getContextPath()%>/admin/toStudentManage";},2000)
                   }else{
                       //成功的回调函数
                       $("#tipCont").text("Add StudentInfo Fail!")
                       // 展示
                       $("#tioModal").modal("show")
                   }

               }
           })
       }
   </script>
</body>
</html>
